<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app" >
      <my-button></my-button>
    </div>
    <script src="/dist/vue.js"></script>
    <script>
      //Vue.component => Vue.extend => 返回通过对象创建一个类，通过这个类去创建一个组件去使用
      Vue.component("my-button", {
        template: "<button>按钮</button>",
      });
      //通过__proto__,查找自身是否存在,没有则查找父, Object.create
      const vm = new Vue({
        el: "#app",
        components: {
          "my-button": {
            template: "<button>内部按钮</button>",
          },
        },
      });
      //1.Vue.component=>Vue.extend方法=> 将对象生成子类的构造函数
      //2.如果组件添加了 init hook() componentOptions => Ctor
      //3.创建真实节点 会调动init hook钩子  new Ctor().$mount() 内部会给组件添加一个watcher(组件watcher),会将渲染的节点放在当前实例上,并且返回
    </script>
  </body>
</html>
